<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <el-form
          :inline="true"
          :rules="rules"
          :model="monitorForm"
          class="demo-form-inline marginTop0"
          ref="userListFrom"
          label-width="60px"
        >
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>审核入库单</span>
            </div>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>
                入库单号：<span>{{ info.order_sn }}</span>
              </li>
              <li>
                入库类型：<span>{{ base.typeList[info.type] }}</span>
              </li>
              <li>
                制单人：<span>{{ info.admin_user_name.name }}</span>
              </li>
              <li>
                创建时间：<span>{{
                  parseTime(info.created_at, "{y}-{m}-{d}")
                }}</span>
              </li>
              <li>
                关联单号：<span>{{ info.related_order_sn }}</span>
              </li>
              <li v-if="info.type != 8">
                采购类型：<span>{{ base.modeList[info.mode] }}</span>
              </li>
              <li v-if="info.type != 8">
                采购员/供应商：<span>{{
                  info.mode == 1
                    ? base.buyer[info.buyer_id]
                    : base.supplier[info.supplier_id]
                }}</span>
              </li>
              <li class="main_w100 box">
                备注：
                <div class="box main_xqi" style="margin-top: -4px">
                  <el-input
                    v-model.trim="monitorForm.form.remark"
                    placeholder="备注"
                    clearable
                    style="width: 100%"
                    @change="isEdit = true"
                  ></el-input>
                </div>
              </li>
            </ul>
          </div>
          <div class="main_tile boxdq marginTop15">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_white padding10 marginBottom10">
            <div class="main_white">
              <div class="boxdq boxha">
                <div class="mainor_sp boxdq" v-if="info.type == 2">
                  <div class="box">
                    <ul class="box">
                      <li class="box">
                        <span> <em>*</em>商品名称： </span>
                        <el-autocomplete
                          v-model="formsp.value"
                          ref="searchSelect"
                          class="wid240 main_comm"
                          @clear="$refs.searchSelect.$children[0].blur()"
                          :fetch-suggestions="
                            (queryString, cb) => {
                              querySearchAsync(queryString, cb);
                            }
                          "
                          placeholder="商品名称/别名/编码/助记码"
                          clearable
                          :highlight-first-item="true"
                          value-key="name"
                          @select="
                            item => {
                              handleSelect(item);
                            }
                          "
                        >
                          <template slot-scope="{ item }">
                            <div class="main_name">
                              <span>
                                {{ item.goods.name }}【{{
                                  item.spu_name.title
                                }}】
                              </span>

                              <span class="code">{{
                                item.goods_spu_code
                              }}</span>
                            </div>
                          </template>
                        </el-autocomplete>
                      </li>
                      <li class="box">
                        <span> <em>*</em>数量： </span>
                        <el-input
                          v-model.trim="formsp.num"
                          ref="focusw2"
                          placeholder="数量"
                          clearable
                          class="wid140"
                          @keyup.enter.native="mainor_sp"
                        ></el-input>
                      </li>
                    </ul>
                    <div class="marginBottom10">
                      <el-button type="primary" @click="mainor_qr"
                        >确认(回车)</el-button
                      >
                      <!-- <el-button
                        class="reset marginLeft5"
                        type="info"
                        @click="reset"
                        >重置</el-button
                      > -->
                    </div>
                  </div>
                </div>
                <div class="mainor_sp boxha">
                  <ul class="box">
                    <li class="box">
                      <el-input
                        v-model.trim="formzd.value"
                        ref="focusw2"
                        placeholder="商品名称"
                        clearable
                        class="wid240"
                        @keyup.enter.native="mainor_zd"
                      ></el-input>
                    </li>
                  </ul>
                  <div class="marginBottom10">
                    <el-button type="primary" @click="mainor_zd"
                      >置顶(回车)</el-button
                    >
                    <!-- <el-button
                      class="reset marginLeft5"
                      type="info"
                      @click="formzd.value = ''"
                      >重置</el-button
                    > -->
                  </div>
                </div>
              </div>
              <div class="main_table marginTop0">
                <el-table
                  ref="multipleTable"
                  :data="monitorForm.list"
                  element-loading-text="加载中"
                  v-loading="listLoading"
                  fit
                  border
                  highlight-current-row
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column label="序号" width="80">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column label="状态">
                    <template slot-scope="scope">
                      <span :class="'status' + scope.row.status">
                        {{ storeStatus[scope.row.status] }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="name">
                    <template slot-scope="scope">
                      <span v-if="scope.row.show">
                        {{ scope.row.goods.name }}【{{
                          scope.row.goods_spu.spu_name.title
                        }}】
                      </span>
                      <span v-else>
                        {{ scope.row.name }}【{{ scope.row.spu_name }}】
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单位" prop="goods_spu.spu_unit.title">
                    <template slot-scope="scope">
                      <div v-if="scope.row.show">
                        {{ scope.row.goods_spu.spu_unit.title }}
                      </div>
                      <div v-else>{{ scope.row.unit }}</div>
                    </template>
                  </el-table-column>

                  <el-table-column label="应入库数量" prop="num" />
                  <el-table-column label="未入库数量" prop="weiruku_storage_num" v-if="isReturnOrder">
                    <template #header>
                      <span>未入库数量</span>
                      <el-tooltip class="item" effect="dark" placement="bottom">
                        <div slot="content">
                          部分入库之后剩余的未入库数量，未入库数量=应入库数量-部分入库数量(实入库录入数量)
                        </div>
                        <svg-icon class="navbar_svg new_navbar_svg" icon-class="summary_question"></svg-icon>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="待入库数量"
                    prop="storage_num"
                    class-name="main_hei"
                    width="160"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.storage_num'"
                        :rules="rules.storage_num"
                        label-width="10px"
                        label=" "
                      >
                        <el-input
                          :disabled="scope.row.status == 1"
                          v-model.trim="scope.row.storage_num"
                          :ref="'storage_num' + scope.row.goods_spu_id"
                          @input="scope.row.xs = false"
                          placeholder="数量"
                          class="wid110"
                          @change="isEdit = true"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="已入库数量" prop="yiruku_storage_num" />
                  <el-table-column
                    label="单价"
                    prop="price"
                    class-name="main_hei"
                  >
                    <template #header>
                      <span>单价</span>
                      <el-tooltip class="item" effect="dark" placement="bottom">
                        <div slot="content">
                          部分入库单价仍为采购单价（位置在单价字段处）
                        </div>
                        <svg-icon class="navbar_svg new_navbar_svg" icon-class="summary_question"></svg-icon>
                      </el-tooltip>
                    </template>
                    <template slot-scope="scope">{{
                      scope.row.id
                        ? scope.row.xs
                          ? scope.row.price
                          : (scope.row.storage_num!=0 ? scope.row.money / scope.row.storage_num : 0)
                          ? (scope.row.storage_num!=0 ? $toFixed(scope.row.money / scope.row.storage_num) : 0)
                          : 0
                        : scope.row.price
                    }}</template>
                  </el-table-column>

                  <el-table-column
                    label="入库金额"
                    prop="un_purchase_num"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">{{
                      scope.row.id
                        ? scope.row.money
                        : parseFloat(scope.row.storage_num) * parseFloat(scope.row.price)
                        ? $toFixed(parseFloat(scope.row.storage_num) * parseFloat(scope.row.price))
                        : 0
                    }}</template>
                  </el-table-column>

                  <el-table-column
                    label="报损数量"
                    prop="report_spills_num"
                    :render-header="renderHeader_purchase"
                    class-name="main_hei"
                    width="160"
                    v-if="info.type == 8"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.report_spills_num'"
                        :rules="rules.storage_num"
                        label-width="10px"
                        label=" "
                      >
                        <el-input
                          v-model.trim="scope.row.report_spills_num"
                          :ref="'report_spills_num' + scope.row.goods_spu_id"
                          @input="scope.row.loss_show = false"
                          placeholder="数量"
                          class="wid110"
                          @change="reportSpillSnum(scope)"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="备注"
                    prop="remark"
                    width="350"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item label-width="0" label="">
                        <el-input
                          v-model.trim="scope.row.remark"
                          :disabled="scope.row.status == 1"
                          placeholder="备注"
                          class="wid240"
                        ></el-input>
                      </el-form-item>
                      <el-link
                        type="danger"
                        @click="
                          scope.row.show
                            ? lengt <= 1
                              ? endDelete()
                              : scdelete(scope.$index, true)
                            : scdelete(scope.$index)
                        "
                        v-if="info.type == 2"
                        class="paddingTop20"
                        >删除</el-link
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="newConBox_p200 paddingBottom10" id="newConBox">
            <div class="newConBox_h32">
              <div
                :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
              >
                <div class="mainor_prl">
                  <el-button type="primary" @click="preservation(1)" v-repeatClick :disabled="listLoading">保存并通过</el-button>
                  <el-button @click="preservation(3)" v-repeatClick :disabled="listLoading">部分入库</el-button>
                  <el-button v-repeatClick @click="preservation(2)" v-if="info.type == 2" :disabled="listLoading">取消入库</el-button>
                  <!-- <el-button @click="preservation(4)" v-repeatClick :disabled="listLoading">保存</el-button> -->
                  <el-button @click="$router.back(-1)">取消</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const shuju = {
  list: {
    id: "",
    name: "",
    goods_id: "",
    goods_spu_id: "",
    spu_name: "",
    unit: "",
    price: "",
    num: "",
    storage_num: "",
    remark: "",
    show: false,
  },
  form: {
    remark: ""
  },
  formsp: {
    name: [],
    girard: null,
    num: "",
    value: ""
  }
};
import {
  storage_info,
  storage_base,
  storage_getInventory,
  storage_check,
  storage_deleteList
} from "@/api/warehouse/warehouseReceipt";
import { apiUrl, objKeySort, Md5, packApi } from "@/utils/public";
import rules from "@/rules/warehouse/warehouseReceipt_edit";
import { parseTime } from "@/utils/index";
import { goods_getAllGoodsSpu, purchase_Batch } from "@/api/currency";
import { mapGetters } from "vuex";
export default {
  computed: {
    lengt() {
      let zj = 0;
      this.monitorForm.list.map(e => {
        if (e.show) {
          zj++;
        }
      });
      return zj;
    },
    ...mapGetters(["is_batch"])
  },
  components: {},
  data() {
    return {
      // 验证
      rules,
      // 时间
      parseTime,
      // 基本信息
      info: {
        created_at: "2000-01-01",
        updated_at: "2000-01-01",
        type: 0,
        status: 0,
        mode: 0,
        storage_list: [],
        admin_user_name: {}
      },
      base: {
        modeList: ["后台"],
        buyer: ["后台"],
        supplier: ["后台"],
        typeList: ["待审核"]
      },
      listLoading: true,
      // 列表数据
      monitorForm: {
        form: {
          remark: ""
        },
        list: []
      },
      deleteIds: [],
      // 商品搜索
      formzd: {
        value: ""
      },
      formsp: {
        name: [],
        girard: null,
        num: "",
        value: ""
      },
      price: "",
      show: true,
      // id
      id: this.$route.params.id,
      // 监听滚动
      searchBarFixed: false,
      isEdit: false,
      is_delivery: [],
      storeStatus: {
        0: "待入库",
        1: "已完成",
        2: "部分入库"
      },
      isReturnOrder: false, // 是否是退货单，退货单未入库数量不显示
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.$store.commit('app/STORAGECHANGE',true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  beforeRouteLeave(to, from, next) {
    if (this.isEdit) {
      setTimeout(() => {
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            // 正常跳转
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    } else {
      next();
    }
  },
  created() {
    // 基本信息
    this.storage_info();
    this.storage_base();
  },
  methods: {
    renderHeader_purchase(h, { column, $index }) {
      return h("div", [
        h("span", {
          domProps: {
            innerHTML: column.label
          }
        }),
        h(
          "el-tooltip",
          {
            attrs: {
              effect: "dark",
              content:
                "注释：不影响实入库数量，报损会生成退货报损单，自动完成报损出库",
              placement: "top"
            }
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg"
            })
          ]
        )
      ]);
    },
    tableRowClassName({row, rowIndex}) {
      if(row.status == 1) return "halfOpacity";
      return;
    },
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 商品搜索
    querySearchAsync(queryString, cb) {
      if (queryString.trim() == "") {
        cb([]);
        return;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { name: queryString.trim() })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { name: queryString.trim() }
      );
      goods_getAllGoodsSpu(data).then(res => {
        if (res.errcode == 0) {
          res.data.goods.map(e => {
            e.name = e.goods.name + "【" + e.spu_unit.title + "】";
          });
          var results = res.data.goods;
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    
    // 商品选择
    handleSelect(item) {
      this.formsp.name = item;
      this.formsp.girard = item.id;
      this.storage_getInventory();
    },
    storage_getInventory() {
      let formsp = JSON.parse(JSON.stringify(this.formsp));
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                goods_id: formsp.name.goods_id,
                goods_spu_id: formsp.girard
              })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        {
          goods_id: formsp.name.goods_id,
          goods_spu_id: formsp.girard
        }
      );
      storage_getInventory(data).then(res => {
        if (res.errcode == 0) {
          this.price = res.data.data.price;
          setTimeout(() => {
            this.$refs.focusw2.focus();
          }, 100);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 商品选择确认(回车)
    mainor_sp(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.mainor_qr();
      }
    },
    // 点击添加
    mainor_qr() {
      let formsp = JSON.parse(JSON.stringify(this.formsp));
      if (!formsp.name.name) {
        this.$message.error("请填写商品名称");
        this.$refs.searchSelect.focus();
        return;
      } else if (formsp.num == "") {
        this.$message.error("请填写数量");
        this.$refs.focusw2.focus();
        return;
      } else {
        let monitorForm_list = JSON.parse(
          JSON.stringify(this.monitorForm.list)
        );
        let ind = 0;
        if (monitorForm_list.length != 0) {
          monitorForm_list.map((e, index) => {
            if (e.goods_spu_id == formsp.girard) {
              ind = e.goods_spu_id;
              return;
            }
          });
          if (ind == 0) {
            this.handle(formsp);
          } else {
            setTimeout(() => {
              console.log(ind, "ind");
              this.$refs["storage_num" + ind].focus();
              this.reset();
              ind = 0;
            }, 100);
          }
        } else {
          this.handle(formsp);
        }
      }
    },

    handle(formsp) {
      let list = JSON.parse(JSON.stringify(shuju.list));
      list.name = formsp.name.goods.name;
      list.goods_id = formsp.name.goods_id;
      list.goods_spu_id = formsp.name.id;
      list.spu_name = formsp.name.spu_name.title;
      list.unit = formsp.name.spu_unit.title;
      list.price = this.price;
      list.num = formsp.num;
      list.storage_num = formsp.num;
      list.remark = formsp.name.remark;
      this.monitorForm.list.push(list);

      this.reset();
      setTimeout(() => {
        this.$refs.searchSelect.focus();
      }, 100);
    },
    reset() {
      this.formsp = JSON.parse(JSON.stringify(shuju.formsp));
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    //输入框事件
    inpuChagne(row, type) {
      if (type == 1) {
        let total = 0;
        row.batch_data.map(c => {
          total += Number(c.num);
        });
        row.storage_num = total;
      }else{
        row.storage_num = Number(row.batch_data.num)
      }
    },
    // 置顶
    mainor_zd() {
      this.isEdit = true;
      let formzd = JSON.parse(JSON.stringify(this.formzd));
      let list = JSON.parse(JSON.stringify(this.monitorForm.list));
      if (formzd.value != "") {
        list.map((e, index) => {
          if (
            e.goods.name.includes(formzd.value) ||
            e.goods_spu.goods_spu_code.includes(formzd.value)
          ) {
            let sz = {};
            sz = e;
            list.splice(index, 1);
            list.unshift(sz);
          }
        });
        this.monitorForm.list = list;
      }
    },
    // 删除
    scdelete(index, type) {
      this.isEdit = true;
      if (type) {
        this.deleteIds.push(this.monitorForm.list[index].id);
        this.monitorForm.list.splice(index, 1);
      } else {
        this.deleteIds.push(this.monitorForm.list[index].id);
        this.monitorForm.list.splice(index, 1);
      }
    },
    endDelete() {
      this.$message.error("入库单最后一个商品无法删除");
    },
    // 报损数量修改
    reportSpillSnum(scope) {
      console.log(scope.row.report_spills_num, scope.row.num);
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(scope.row.report_spills_num)) &&
        scope.row.report_spills_num != ""
      ) {
        if (
          parseFloat(scope.row.report_spills_num) > parseFloat(scope.row.num)
        ) {
          scope.row.report_spills_num = scope.row.num;
        }
      } else {
        scope.row.report_spills_num = 0;
      }
    },
    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate(valid => {
        if (valid) {
          if (type == 2) {
            this.$confirm("确定取消入库?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.storage_check(type);
              })
              .catch(() => {});
            return;
          }
          this.storage_check(type);
        }
      });
    },
    storage_check(type) {
      let arry = [];
      let monitorForm = JSON.parse(JSON.stringify(this.monitorForm));
      console.log(monitorForm);
      monitorForm.list.map(e => {
        arry.push({
          id: e.id ? e.id : null,
          goods_id: e.goods_id,
          goods_spu_id: e.goods_spu_id,
          remark: e.remark,
          num: e.num,
          storage_num: e.storage_num,
          price: e.price,
          report_spills_num: e.report_spills_num,
        });
      });
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { id: this.id, status: type })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        monitorForm.form,
        { delete_ids: this.deleteIds.join(",") },
        {
          list: JSON.stringify(arry),
          id: this.id,
          status: type
        }
      );
      // console.log(JSON.parse(data.list))
      // return
      storage_check(data).then(res => {
        if (res.errcode == 0) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.isEdit = false;
          this.$router.go(-1);
        } else if (res.errcode == 40035) {
          let msg = res.errmsg;
          this.$nextTick(() => {
            this.$alert(msg, "提示", {
              confirmButtonText: "确定",
              callback: action => {
                this.isEdit = false;
                this.$router.go(-1);
              }
            });
          });
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 基本信息
    storage_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: this.id }
      );
      storage_info(data).then(res => {
        if (res.errcode == 0) {
          res.data.info.storage_list.map(e => {
            if (e.batch_data) {
              e.batch_data = JSON.parse(e.batch_data);
            }
            e.loss_show = true;
            e.show = true;
            e.xs = true;
            e.batch_show = true;
            // 商品入库完成，待入库数量应为0
            if(e.status == 1) e.storage_num = '0.00';
          });
          this.monitorForm.list = res.data.info.storage_list;
          this.monitorForm.form.remark = res.data.info.remark;
          this.info = res.data.info;
          this.isReturnOrder = this.info.type != 8;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    storage_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      storage_base(data).then(res => {
        if (res.errcode == 0) {
          this.base = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .newConBox.on {
    margin-left: -10px;
  }
  .main_table {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
        }
        .main_upImg {
          /deep/ul {
            li {
              padding-left: 0;
            }
          }
          /deep/.el-upload-list--picture-card
            .el-upload-list__item:first-child {
            margin-left: 145px;
          }
        }
      }
    }
  }
  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 60px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
        &:first-child {
          & > span {
            width: 85px;
          }
        }
      }
    }
  }
  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
    .mainor_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .base_p {
    width: 80px;
  }
  .main_page_top {
    margin-top: 7px;
    margin-left: 10px;
    use {
      fill: $menuText;
    }
    &:hover {
      cursor: pointer;
      use {
        fill: $menuActiveText;
      }
    }
  }
}

.main_name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  height: 50px;
  .main_addr {
    color: #999;
  }
  span {
    line-height: 20px;
    display: inline;
    height: 20px;
  }
}
.slot-select {
  margin-top: 10px;
}
/deep/.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #c8c9cc;
  border-color: #c8c9cc;
}
.status0 {
  color: red;
}
.status2 {
  color: $order_color1;
}
.new_navbar_svg {
  transform: translateY(-2px);
}
/deep/.el-table  .halfOpacity {
  opacity: 0.5;
}
</style>
